<template>
	<view class="base-page">
		<u-notify ref="uNotify"></u-notify> <!-- 通知横幅 -->
		<u-modal :show="showchange" title="是否确认修改密码" :closeOnClickOverlay="true" showCancelButton
			@confirm="submitChange()" @cancel="showchange = false" @close="showchange = false" :asyncClose="true"></u-modal> <!-- 改密确认模态框 -->
		<view class="info-list">
			<u-cell-group>
				<u-form :model="userPwd" :rules="rules" ref="uForm">
					<u-form-item prop="oldpassword">
						<u-cell title="旧密码">
							<u-input slot="value" placeholder=请输入旧密码 border="bottom" v-model="userPwd.oldpassword"
								maxlength="30" type="password"></u-input>
						</u-cell>
					</u-form-item>
					<u-form-item prop="newpassword">
						<u-cell title="新密码">
							<u-input slot="value" placeholder=请输入新密码 border="bottom" v-model="userPwd.newpassword"
								maxlength="30" type="password"></u-input>
						</u-cell>
					</u-form-item>
					<u-form-item prop="confirmpassword">
						<u-cell title="确认密码">
							<u-input slot="value" placeholder=请再次确认新密码 border="bottom" v-model="userPwd.confirmpassword"
								maxlength="30" type="password"></u-input>
						</u-cell>
					</u-form-item>
				</u-form>
			</u-cell-group>
		</view>
		<u-gap height="100rpx" bgColor="#ffffff"></u-gap>
		<view class="submit-btn">
			<u-button text="确认修改" type="primary" plain size="normal" @click="clickChange()"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户密码
				userPwd: {
					oldpassword: "",
					newpassword: "",
					confirmpassword: ""
				},
				
				//模态框控制
				showchange: false,
				
				//token与登录态
				responseResult: [],
				islogin: false,
				mytoken: '', //token
				
				//表单验证规则
				rules: {
					'oldpassword': [{
						type: 'string',
						required: true,
						message: '请填写旧密码',
						trigger: ['blur', 'change']
					},{
						min: 6,
						message: '密码不少于6个字符',
						trigger: ['blur'],
					}],
					'newpassword': [{
						type: 'string',
						required: true,
						message: '请填写新密码',
						trigger: ['blur', 'change']
					},{
						min: 6,
						message: '密码不少于6个字符',
						trigger: ['blur'],
					},{
						validator: (rule, value, callback) => {
							// 返回true表示校验通过，返回false表示不通过
							return this.userPwd.oldpassword != this.userPwd.newpassword;
						},
						message: '新旧密码不能相同',
						trigger: ['blur'],
					}],
					'confirmpassword': [{
						type: 'string',
						required: true,
						message: '请再次填写新密码',
						trigger: ['blur', 'change']
					},{
						validator: (rule, value, callback) => {
							// 返回true表示校验通过，返回false表示不通过
							return this.userPwd.newpassword == this.userPwd.confirmpassword;
						},
						message: '两次输入的新密码不一致',
						trigger: ['blur'],
					}]
				},
			};
		},
		methods: {
			//点击确认修改密码按钮
			clickChange() {
				this.$refs.uForm.validate().then(res => {
					this.showchange = true
				}).catch(errors => {
					uni.$u.toast('请正确填写信息')
				})
			},
			//确认提交
			submitChange() {
				uni.request({
					header: {
						'Authorization': 'Bearer ' + this.mytoken
					},
					url: getApp().globalData.baseUrl+'/landlord/changePassword',
					method: 'GET',
					data: {
						oldPassword: this.userPwd.oldpassword,
						newPassword: this.userPwd.newpassword
					},
					success: (res) => {
						this.responseResult = res.data;
						if (this.responseResult.success == true) {
							//修改成功，则关闭确认框,并退出当前用户。跳转到login后，弹出成功提示
							this.showchange = false
							uni.clearStorageSync(); /* 清除缓存 */
							uni.reLaunch({
								url: "/pages/login/login?sign=3"
							})
						} else {
							//修改失败，则关闭确认框并弹出错误提示
							this.showchange = false
							this.$refs.uNotify.warning(this.responseResult.errorMsg)
						}
					},
					fail: (err) => {
						this.$refs.uNotify.error("请求错误: 修改密码失败")
					},
				});
			}
		},
		onLoad() {
			let token = uni.getStorageSync("MyToken")
			if (token) {
				this.islogin = true
				this.mytoken = token
			} else {
				this.islogin = false
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style lang="scss">
	.base-page {
		background-color: #ffffff;
		height: 100%;
		box-sizing: border-box;
	}

	.info-list {}

	.submit-btn {
		width: 650rpx;
		margin-left: 50rpx;
	}
</style>
